<form class="basic" action="" method="POST">

    <img src="/resource/www/imgs/huod_1.png" class="jind-img">

    <div class="city fix">
        <span class="text">城市</span>
        <div class="city-box">
          <span class="cityname"><{$activity.city}></span>
        </div>
        <input type=hidden name='cityId' value='<{$activity.cityId}>'>
        <input type=hidden name='city' value='<{$activity.city}>'>
        <input type=hidden name='country' value='<{$activity.country}>'>
    </div>

    <div class="city fix">
        <span class="text">集合点</span>
        <input type="text" name="location" value="<{$activity.location}>" placeholder="例如：7 Rue THEOPHILE GAUTIER" class="jihd">
        <input type="hidden" name="lat" value="<{$activity.lat}>">
        <input type="hidden" name="lng" value="<{$activity.lng}>">
    </div>
    
    <div class="addr fix" id="map-container" style="width: 760px;height: 200px;margin: 10px 120px;border: 1px dotted rgb(70, 208, 139);background: url('/resource/www/imgs/map-preview.png') 316px 36px no-repeat;"></div>
    
    <div class="renq fix">
        <span class="text">
            适宜人群
            <br>
            (多选)
        </span>
        <label class="label">
            <input class="input" type="checkbox" name="support70s" value="1" <{if $activity.support70s}>checked="checked"<{/if}> id="">70后
        </label>
        <label class="label">
            <input class="input" type="checkbox" name="support80s" value="1" <{if $activity.support80s}>checked="checked"<{/if}> id="">80后
        </label>
        <label class="label">
            <input class="input" type="checkbox"  name="support90s" value="1" <{if $activity.support90s}>checked="checked"<{/if}> id="">90后
        </label>
        <label class="label">
            <input class="input" type="checkbox" name="support00s" value="1" <{if $activity.support00s}>checked="checked"<{/if}> id="">00后
        </label>
    </div>

    <div class="jied fix">
        <span class="text">
            可接待人数
        </span>
        <select class="select" name="serviceMinPersons" value="<{$activity.serviceMinPersons}>">
            <option  value="-1">最低不少于1人</option>
            <{section name=loop loop=15}>
            <option  value="<{$smarty.section.loop.index+1}>" <{if $activity.serviceMinPersons == ($smarty.section.loop.index+1)}>selected<{/if}>><{$smarty.section.loop.index+1}>人</option>
            <{/section}>
        </select>
        <span class="number">人</span>
        <select class="select" name="serviceMaxPersons" value="<{$activity.serviceMaxPersons}>">
            <option  value="-1">最高不多于15人</option>
            <{section name=loop loop=15}>
            <option  value="<{$smarty.section.loop.index+1}>" <{if $activity.serviceMaxPersons == ($smarty.section.loop.index+1)}>selected<{/if}>><{$smarty.section.loop.index+1}>人</option>
            <{/section}>
        </select>
        <span class="number">人</span>
    </div>

    <input type="submit" class="submit" name="submit1" value="下一步" onclick="return submit_activ_basic();">
    <div class='city-wrap' style="display:none;">
        <ul class="country-box">
        <{foreach from=$cityList item=citys name=countryBox key=country}>
          <{if $smarty.foreach.countryBox.index==0}>     
          <li country="<{$country}>" class="active"><{$country}></li>
          <{else}>
          <li country="<{$country}>"><{$country}></li>
          <{/if}>
        <{/foreach}>
        </ul>

        <{foreach from=$cityList item=citys name=cityBox key=country}>
          <div class='city-item' country='<{$country}>' 
          <{if $smarty.foreach.cityBox.index==0}>
          <{else}>     
          style="display:none;"
          <{/if}>
          >
          <{foreach from=$citys item=city key=cityId}>
          <a href='javascript:void(0);' data='<{$cityId}>'><{$city}></a>
          <{/foreach}>
          </div>
        <{/foreach}>
    </div>
</form>

<script type="text/javascript" src="http://maps.google.cn/maps/api/js?key=AIzaSyCXDeoGjdaJoF22xDyU0L-cugypMDjxQJY"></script>
<script>
//城市选择
$(".city-box .cityname").click(function(e){
    e.stopPropagation();
    $('.city-wrap').toggle();
});
$(".city-wrap .country-box li").click(function(e){
    e.stopPropagation();
    $('.country-box li').removeClass('active'); 
    $(this).addClass('active');
    $('.city-item').hide();
    var country=$(this).attr('country');
    $('.city-item[country='+country+']').show();
});
$('.city-wrap .city-item a').click(function(e){
    var id=$(this).attr('data');
    var city=$(this).html();
    var country=$(this).parent().attr('country');
    $("input[name='cityId']").val(id);
    $("input[name='city']").val(city);
    $("input[name='country']").val(country);
    $('.city-wrap').hide();
    $('.city-box .cityname').html(city);
});
$(document).click(function() {
    $('.city-wrap').hide();
});

//初始化地图
var lng=$("input[name='lng']").val();
var lat=$("input[name='lat']").val();
if(lng&&lat){
	var loc=new google.maps.LatLng(lat,lng);
	ParseLocation(loc);
}

//输入地址
$("input[name='location']").change(function(){
	var address=$(this).val();
	var geocoder = new google.maps.Geocoder();
	geocoder.geocode({ 'address': address }, function (results, status) {
	    if (status == google.maps.GeocoderStatus.OK) {
	        ParseLocation(results[0].geometry.location);
	    }
	    else{
             layer.msg("地址不存在或格式不正确");
             $(this).val('');
	    }
	});
});

function ParseLocation(location) {

    var lat = location.lat().toString().substr(0, 12);
    var lng = location.lng().toString().substr(0, 12);
    console.log("lat:"+lat+"lng:"+lng);
    $("input[name='lng']").val(lng);
    $("input[name='lat']").val(lat);
    
    var myplace,infowindow,marker;
    var myLatlng=new google.maps.LatLng(lat,lng);
    var mapOptions = {
        center: myLatlng,
        zoom: 13,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    
    var map = new google.maps.Map(document.getElementById("map-container"),
            mapOptions);
    
    marker = new google.maps.Marker({
        map: map,
        position: myLatlng
    });
    
    infowindow = new google.maps.InfoWindow({
    	content:"此处为您输入的地址"
    });
    infowindow.open(map,marker);

}

function submit_activ_basic() {

    var oCountry = $('.basic').find("input[name='country']").val();
    if (oCountry == '') {
        layer.msg('请选择国家');
        return false;
    }

    var oCity = $('.basic').find("input[name='city']").val();
    var oCityId = $('.basic').find("input[name='cityId']").val();
    if (oCityId == ''||oCity=='') {
        layer.msg('请选择城市');
        return false;
    }

    var oLocal = $("input[name='location']").val();
    if (!$.trim(oLocal)) {
        layer.msg('请填写集合点');
        return false;
    }


    if (!$("input:checkbox[name*='support']").is(':checked')) {
        layer.msg('请选择适宜人群');
        return false;
    }

    var oMixpeople = $('.basic').find("select[name='serviceMinPersons']").val();
    if (oMixpeople == -1) {
        layer.msg('请选择最小可接待人数');
        return false;
    }

    var oMaxpeople = $('.basic').find("select[name='serviceMaxPersons']").val();
    if (oMaxpeople == -1) {
        layer.msg('请选择最大可接待人数');
        return false;
    }

}


</script>
